import React, { forwardRef, useImperativeHandle, useState } from 'react'
import {
  Button, message, Modal, Upload,
} from 'antd'
import _ from 'lodash'
import styles from './index.less'
import { SUAN_PAN } from '@/utils/https'

const { Dragger } = Upload
const projectId = JSON.parse(sessionStorage.getItem('defaultWorkSpace') || '{}').id

const ClickImport = (props, ref) => {
  const [modalVisible, setModalVisible] = useState(false)

  useImperativeHandle(ref, () => ({
    toggleModal,
  }))

  const toggleModal = () => {
    setModalVisible(!modalVisible)
  }

  const onConfirm = () => { }

  const uploadConfig = {
    name: 'file',
    // multiple: true,
    action: `${SUAN_PAN}/api/v1/dictionary/import/excel`,
    accept: '.xlsx,.xls',
    headers: { 'X-Project-Id': projectId },
    onChange(info) {
      const { status } = info.file
      // console.log('uploadConfig-status', status)
      // if (status !== 'uploading') {
      //   console.log(info.file, info.fileList)
      // }
      if (status === 'done') {
        const res = _.cloneDeep(info.file.response || {})
        // console.log('uploadConfig-info', info)
        // console.log('uploadConfig-res', res)
        if (res.status === 200) {
          message.success(`${info.file.name} 上传成功`)
          props.forceUpdateFn()
        } else {
          message.warning(res?.msg || '上传错误')
          setTimeout(() => {
            info.file.status = 'error'
            info.file.response = res?.msg || '上传错误'
            info.fileList.find((item) => item.uid === info.file.uid).status = 'error'
            console.log('else-info', info)
          }, 20)
        }
      } else if (status === 'error') {
        const res = info?.file?.response
        setTimeout(() => {
          info.file.status = 'error'
          info.file.response = res?.msg || '上传错误'
          info.fileList.find((item) => item.uid === info.file.uid).status = 'error'
        }, 20)
        message.error(`${info?.file?.name} 文件上传失败`)
      }
    },
  }

  // 下载模板
  const onDownload = () => {
    window.location.href = `${SUAN_PAN}/api/v1/dictionary/import/template/download`
  }

  return (
    <Modal
      className={styles.click_import}
      title="一键导入"
      visible={modalVisible}
      destroyOnClose
      maskClosable={false}
      forceRender={false}
      width={520}
      footer={null}
      // okText="导入"
      onCancel={toggleModal}
      onOk={onConfirm}
    >
      <div className={styles.download_bar}>
        <Button
          onClick={onDownload}
          type="link"
          className="pege-content-tabs-right-button"
          key="download"
          download
        >
          <i className="iconfont icon-xiazai" />
          下载模板
        </Button>
      </div>
      <Dragger className={styles.upload_box} {...uploadConfig}>
        <p className="ant-upload-drag-icon">
          <i className="iconfont icon-cunchu" />
        </p>
        <p className={styles.txt}>将文件拖拽至此，或单击直接上传</p>
        <p className={styles.sign}>
          支持扩展名：.xls, .xlsx
        </p>
      </Dragger>
    </Modal>
  )
}

export default forwardRef(ClickImport)
